<template>
    <div class="bg">
        <div class="top">
            <div class="topw">学习记录</div>
            <div class="topd">
            </div>
        </div>
        <div class="show">
            <span v-show="ifshow" class="el-icon-film"
                  style="font-family: 隶书  ;font-size: 30px;color: gray">暂时没有数据</span>
        </div>
        <div v-show="!ifshow">
            <el-row style="margin-left: 25px">
                <el-col :span="23">
                    <el-col :span="6">
                        <div class="grid-content bg-purple">课程名称</div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content bg-purple">学习内容</div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content bg-purple">学习进度</div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content bg-purple">学习时间</div>
                    </el-col>

                </el-col>
            </el-row>
            <div>
                <div v-for="(item,index) in studyInfo" :key="index">
                    <div class="s_div" v-if="item.className">{{item.className}}</div>
                    <div class="s_div" v-if="item.videoName">{{item.videoName}}</div>
                    <div class="s_div">
                        <el-progress :text-inside="true" :stroke-width="20"
                                     :percentage="Math.floor(((item.playTime/60)/(item.sumTime/60))*100)"
                        ></el-progress>
                        <span v-if="Math.floor(item.playTime/3600)<10">0</span>
                        {{Math.floor(item.playTime/3600)}}:
                        <span v-if="Math.floor(item.playTime/60)<10">0</span>
                        {{Math.floor(item.playTime/60)}}:
                        <span v-if="Math.floor(item.playTime%60)<10">0</span>
                        {{item.playTime%60}}
                        /
                        <span v-if="Math.floor(item.sumTime/3600)<10">0</span>
                        {{Math.floor(item.sumTime/3600)}}:
                        <span v-if="Math.floor(item.sumTime/60)<10">0</span>
                        {{Math.floor(item.sumTime/60)}}:
                        <span v-if="Math.floor(item.sumTime%60)<10">0</span>
                        {{item.sumTime%60}}
                    </div>
                    <div class="s_div" v-if="item.playTimePoint">{{item.playTimePoint}}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "order",
        data() {
            return {
                ifshow: true,
                userData: [],
                studyInfo: [],
            }
        },
        methods: {
            //查询用户
            searchMember() {
                var that = this;
                var token = sessionStorage.getItem("token");
                this.$http.get(`/member/findMemberByToken/${token}`).then(function (successCallback) {
                    if (successCallback.data.code === 2000) {
                        that.userData = successCallback.data.result;
                        that.searchStudyInfo();
                    }
                })
            },
            searchStudyInfo() {
                var that = this;
                this.$http.get(`/study/getStudyInfo/${that.userData.mobile}`).then(function (success) {
                    if (success.data.code === 200) {
                        that.studyInfo = success.data.result;
                        if (that.studyInfo.length !== 0) {
                            that.ifshow = false;
                        }
                    } else {
                        that.$notify({
                            title: '错误！',
                            message: '请刷新后重试！',
                            type: 'error'
                        });
                    }
                })
            }
        }
        , created() {
            this.searchMember()
        }
    }
</script>

<style scoped>
    .bg-purple {
        color: black;
        font-weight: 700;
        text-align: center;
        font-family: 微软雅黑;
        font-size: 12px;
    }

    .s_div {
        display: inline-block;
        width: 198px;
        height: 50px;
        padding: 10px 0;
        font-size: 12px;
        color: gray;
    }
</style>